<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">获取明细</view>
        <view class="colse" @click="close">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="scrollView">
          <view class="couponHeader flex flex-align">
            <view class="flex-1">获取时间</view>
            <view class="flex-1">数量</view>
            <view class="flex-1">有效期至</view>
          </view>
          <scroll-view style="height:612rpx"  scroll-y="true">
            <view class="couponItem flex flex-align" v-for="(item,index) in cunpontInfo" :key="index">
              <view class="flex-1">{{timestampToDateTimes(item.get_at)}}</view>
              <view class="flex-1">{{item.num}}张</view>
              <view class="flex-1">{{timestampToDateTimes(item.lastest_at)}}</view>
            </view>
          </scroll-view>
        </view>
      
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {timestampToDateTimes } from '@/utils/tools';
import { couponInfo } from '@/api/user';
const prop =  defineProps({
  show: {
    type: Boolean,
    default: true
  },
  coupon: {
    type: Array,
    default: () => [] 
  },
  overlayCoupon: {
    type: Number,
    default: 1
  }
})
const triggered = ref(false)
const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open(e: any) {
  console.log(e)
  getcoupon(e)
  popup.value?.open('bottom')
  updateShow(true)
}
const cunpontInfo = ref<Recordable>({})
function getcoupon(e: any) {
  couponInfo({coupon_id:e.coupon_id}).then((res:any)=>{
    cunpontInfo.value = res
  })
}


function close() {
  popup.value?.close()
  updateShow(false)
}

function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #F5F6F7;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .scrollView{max-height: 700rpx;padding: 0 26rpx;}
  .couponHeader{background:#FE7431 ;color: #fff;font-size: 26rpx;text-align: center;height:88rpx ;}
  .couponItem{background: #FFEBE2;height: 88rpx;text-align: center;margin-bottom: 2px;}
}
</style>
